<template>
  <div>
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchParam.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
          <el-input v-model="searchParam.phone" placeholder="电话号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row style="height:45px;">
      <el-button type="primary" @click="handleAdd" style="position:absolute;left:0px;">新增</el-button>
    </el-row>
    <el-table
      :data="tableData"
      height="450"
      border
      stripe
      style="width: 100%;">
      
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>        
        <el-button slot="reference"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <Tree></Tree>
  </div>
</template>

<script>
import Tree from '@/components/tree'
  export default {
    name: 'RoleManage',
    components:{
      Tree
    },
    data() {
      return {
        currentPage4: 4,
         searchParam: {
          name: '',
          email: '',
          phone: ''
        },
        dialogFormVisible: false,
        dialogFormTitle: '',
        delPopVisible: false,
        form: {
          name: '',
          email: '',
          phone: '',
          address: ''
        },
        formLabelWidth: '120px',
        tableData: [{ 
          id: 1,     
          name: '王小虎',
          phone: '13576678551',
          email: '923428560@163.com',
          address: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02'
        }, {
          id: 2,
          name: '王小虎',
          phone: '13576678551',
          email: '923428560@163.com',
          address: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02'
        }, {
          id: 3,
          name: '王小虎',
          phone: '13576678551',
          email: '923428560@163.com',
          address: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02'
        }, {
          id: 4,
          name: '王小虎',
          phone: '13576678551',
          email: '923428560@163.com',
          address: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02'
        }]
      }
    },
    created(){

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleAdd() {
        console.log("新增");
        this.dialogFormTitle = '新增用户';
        this.dialogFormVisible = true;
        this.form = {};
      },
      handleEdit(index, row) {
        console.log("编辑：", index, row);
        this.dialogFormTitle = '编辑用户';
        this.dialogFormVisible = true;
        Object.assign(this.form, row);
        console.log("form:", this.form)
      },
      handleDelete(index, row) {
        console.log("delete:", index, row);
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      onSubmit() {
        console.log('submit!'+ this.searchParam.name+"," + this.searchParam.phone);
      }
    }
  }
</script>
<style scoped>
.demo-form-inline{
  width:850px;
}
.el-form-item:first{
  margin-left:0px;
}
</style>